<!--
 * @Author: 杨有财
 * @Date: 2025-01-06 01:30:48
 * @LastEditTime: 2025-03-03 10:55:07
 * @LastEditors: 杨有财
 * @Description: 头部布局
 *
-->
<template>
  <l-header
    v-if="settingStore.showHeader"
    :show-logo="settingStore.showHeaderLogo"
    :theme="settingStore.displayMode"
    :layout="settingStore.layout"
    :is-fixed="settingStore.isHeaderFixed"
    :menu="headerMenu"
    :is-compact="settingStore.isSidebarCompact"
  />
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { MenuRoute } from 'tdesign-vue-next';
import { computed } from 'vue';

import { getFirstFullPath } from '@/router';
import { usePermissionStore, useSettingStore } from '@/store';

import LHeader from './Header.vue';

const permissionStore = usePermissionStore();
const settingStore = useSettingStore();
const { routers: menuRouters } = storeToRefs(permissionStore);
const headerMenu = computed(() => {
  if (settingStore.layout === 'mix') {
    if (settingStore.splitMenu) {
      return menuRouters.value.map((menu) => ({
        ...menu,
        // 由于是动态路由不确定默认会展开那个所以覆盖 path 自动获取第一个菜单
        path: getFirstFullPath(menu),
        children: [] as MenuRoute[],
      }));
    }
    return [];
  }
  return menuRouters.value;
});
</script>
